import React, { useContext, useState, useEffect } from 'react';
const UserContext = React.createContext();
const { Provider, Consumer } = UserContext;

function Context() {
  const [name, setName] = useState('Millet');

  useEffect(() => {
    const timer = setTimeout(() => setName('Mike'), 1000);
    return () => clearTimeout(timer);
  }, []);

  const logout = () => {
    setName('');
  };

  return (
    <Provider value={{ name, logout }}>
      {/* <Consumer>{value => <a>{value.name}</a>}</Consumer> */}
      <Children />
    </Provider>
  );
}

function Children() {
  const { name, logout } = useContext(UserContext);
  return (
    <>
      <h3>Children</h3>
      <a>{name}</a>
      <button onClick={logout} style={{ transform: 'rotate(60deg)' }}>
        注销
      </button>
      {/* <Consumer>{value => <a>{value.name}</a>}</Consumer> */}
    </>
  );
}

export default Context;
